<template>
    <div class="jianzhan-content">
        <el-button type="text" @click="print">{{$t('download')}}</el-button>
        <div class="print-area" id="print" ref="print">
            <div class="report-content">
                <h3 class="report">Daily Report - {{today}}</h3>
                <div class="attend-content">
                    <div class="attend-item">
                        <bar-chart :options="options"> </bar-chart>
                    </div>
                    <div class="attend-item">
                        <el-table
                                border
                                stripe
                                height="450px"
                                :data="report.filter(item => item.clockRecord.checkStatusDes === 'OFF')"
                                style="width: 100%">
                            <el-table-column
                                    prop="employeeName"
                                    label="姓名"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="employeeId"
                                    label="员工ID"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="part-content">
                    <bar-chart :options="options1">

                    </bar-chart>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import print from 'vue-print-nb'
    import moment from 'moment'
    import barChart from '../../components/shanxi/barChart'
    import {getDayReport, getReportMonth} from "../../api/hrReport";
    import {ERROR_OK} from "../../util/config";
    import {getPartReport} from "../../api/service";
    export default {
        name: "day-report",
        components:{
            barChart
        },
        directives:{
            print
        },
        data() {
            return {
                monthList: [],
                total:0,
                absence:0,
                report:[],
                data:{},
                x:[],
                y:[],
                y1:[],
                y2:[],
                today:moment().format('YYYY-MM-DD')
            }
        },
        computed:{
            options() {
                return {
                    color:['#fff'],
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true,
                                title: 'Save As Image'
                            },
                            dataView: {
                                show: true,
                                title: 'Data View'
                            },
                        },
                    },
                    title: {
                        text: '出勤人数比例',
                        textStyle:{
                            color:'#fff',
                        },
                        subtext: 'IEL',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['实到', '未到']
                    },
                    label: {
                        show: true,
                        formatter: "{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '人数',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: this.data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                                }

                            }
                        }
                    ]
                }
            },
            options1(){
                return {
                    color: ['#fff','#ccc','#abcdef'],
                    legend: {
                        data: ['在库金额','入库金额','出库金额']
                    },
                    title: {
                        text: '在库金额统计',
                        left: 10
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            dataView:{
                                show:true
                            },
                            saveAsImage: {
                                pixelRatio: 2
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    grid: {
                        bottom: 90
                    },
                    dataZoom: [{
                        type: 'inside'
                    }, {
                        type: 'slider'
                    }],
                    xAxis: {
                        data: this.x,
                        silent: false,
                        splitLine: {
                            show: false
                        },
                        nameTextStyle:{
                            color:'#ccc'
                        },
                        axisLabel:{
                            color:'#ccc'
                        },
                        splitArea: {
                            show: false
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            nameTextStyle:{
                                color:'#ccc'
                            },
                            name: '金额',
                            axisLabel: {
                                formatter: '{value} RMB',
                                color:'#ccc'
                            }
                        },
                    ],
                    series: [
                        {
                            type: 'line',
                            name: '在库金额',
                            data: this.y,
                            // itemStyle : { normal: {label : {show: true}}},
                            // Set `large` for large data amount
                        },
                        {
                            type: 'line',
                            name: '入库金额',
                            data: this.y1,
                            // itemStyle : { normal: {label : {show: true,style:{transform:'translateY(-90deg)'}}}},
                            // Set `large` for large data amount
                        },
                        {
                            type: 'line',
                            name: '出库金额',
                            data: this.y2,
                            // itemStyle : { normal: {label : {show: true,style:{transform:'translateY(-90deg)'}}}},
                            // Set `large` for large data amount
                        },
                    ]
                };
            }
        },
        created(){
            this.getDailyReport()
            this.getPartReport()
        },
        methods:{
            print(){
                this.$print(this.$refs.print,{'notPrint':'.el-button, .el-select'})
            },
            async getDailyReport(){
                const month = moment().format('YYYY-MM')
                const day = parseInt(moment().format('YYYY-MM-DD').substr(8,2))
                const {status:status1, data:data1} = await getReportMonth(1)
                if (status1 === ERROR_OK) {
                    this.monthList = data1;
                }
                const monthId = this.monthList.find(item => item.monthTime === month).id
                const {status,data} = await getDayReport(monthId, day)
                if (status === ERROR_OK) {
                    this.report= data.dailyEmployeeVoList
                    this.total = data.totalEmployee
                    this.absence = data.absenceEmployee
                    this.data = [{name:'实到',value:this.total-this.absence},{name:'未到',value:this.absence}]
                }

            },
            async getPartReport() {
                const {status,data} = await getPartReport()
                if (status === ERROR_OK) {
                    this.x = Object.keys(data)
                    this.y = this.x.map(item => data[item].sumStockPrice)
                    this.y1 = this.x.map(item => data[item].sumStockInPrice)
                    this.y2 = this.x.map(item => data[item].sumStockOutPrice)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .jianzhan-content{
        text-align: center;
    }
    .report-content{
        width: 272mm;
        padding: 20px;
        box-shadow: 1px 1px #eee,-1px 1px #ddd;
        margin-left: 50%;
        transform:translateX(-50%);
        text-align: center;
    }
    .report{
        text-decoration: underline;
        margin: 0;
        padding:0;
    }
    .attend-content{
        margin-top: 18px;
        text-align: center;
        .attend-item{
            display: inline-block;
            width: 50%;
            vertical-align: top;
        }
    }
</style>